<template>
 <div class="content">
	<div class="top_box">
		<div class="top_box_tit">个人中心</div>
		<div class="top_box_en_tit">Collection questions</div>
		<div class="top_box_class_box">
			<div class="top_box_class"  @click="changetop(1)" :class="{top_box_class_select:topindex==1}">统计
					<div class="top_class_heng"></div>
			</div>
			<div class="top_box_class"  @click="changetop(2)" :class="{top_box_class_select:topindex==2}">训练记录
					<div class="top_class_heng"></div>
			</div>
			<div class="top_box_class"  @click="changetop(3)" :class="{top_box_class_select:topindex==3}">设置
					<div class="top_class_heng"></div>
			</div>
		</div>
	</div>
	<div class="bottom_box">
		<router-view
		 ref="mechild"/>
	</div>
 </div>
</template>

<script>

import axios from "axios"
import qs from 'qs'

export default {
  name: 'floor',
   data() {
 	return {
		topindex:-1
 	}
 },
		mounted(){
			this.changetop(1)
		},
		beforeDestroy() {
		},
		watch: {
			topindex(newValue, oldValue) {
				console.log(newValue)
				// console.log(oldValue)
				if(newValue==1){
					// this.$router.push({'path':'/me/meStatistics'})
				}
			}
		},
		 methods:{
			changetop(n){
				if(this.topindex==n){
					return
				}
				this.topindex=n
				if(n==1){
					this.$router.push({'name':'meStatistics'})
				}else if(n==2){
					this.$router.push({'name':'merecord'})
				}else if(n==3){
					this.$router.push({'name':'mesetting'})
				}
			}
		 },
	}
</script>
<style lang="less" scoped>
.top_box{
	height: 1.5rem;
	width: 100%;
	box-sizing: border-box;
	padding: 0.33rem 0 0 0.78rem;
	background: white;
	.top_box_tit{
		font-size: 0.21rem;
		color: #323232;
	}
	.top_box_en_tit{
		font-size: 0.21rem;
		color: #323232;
		margin: 0.1rem 0 0.02rem;
		opacity: 0.1;
	}
	.top_box_class_box{
		display: flex;
		align-items: flex-end;
	}
	.top_box_class{
		// width: 0.6rem;
		// display: inline-block;
		cursor: pointer;
		margin-right: 0.65rem;
		padding: 0 0.15rem 0.21rem;
		font-size: 0.19rem;
		color: #4B63C8;
		box-sizing: border-box;
		// border-bottom: 0.07rem solid #4B63C8;
		position: relative;
		&>.top_class_heng{
			width: 100%;
			height: 0.07rem;
			background: #4B63C8;
			border-radius: 0.04rem 0.04rem 0px 0px;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			display: none;
		}
	}
	.top_box_class_select{
		// border-bottom: 0.07rem solid #4B63C8;
		&>.top_class_heng{
			display: block;
		}
	}
}
.bottom_box{
	padding: 0.35rem 0.54rem 0 0.56rem;
}

</style>
